<template>
  <Panel ><!-- 成绩简介部分 -->
  <div>
    <div id="wenzi">
      <h1 style="margin-left:50px">课程成绩数据</h1><br>
      <div style="font-size:25px;font-weight:700;margin-left:295px;">个人信息</div>
      <h2 style="margin-left:300px;margin-top:20px">
        <Icon type="android-contact"></Icon>&nbsp;&nbsp;姓名：Jerry</h2><br>
      <h2 style="margin-left:300px">
        <Icon type="university"></Icon>&nbsp;&nbsp;学号：2020035107XXX</h2><br>
      <h2 style="margin-left:300px">
        <Icon type="ios-book-outline"></Icon>&nbsp;&nbsp;课程名称：web前端</h2>
      <div id="chartPie" style="width: 600px;height:400px;margin-left:800px;margin-top:-250px"></div>
    </div>
    <div style="position: relative;top: 0px">
      <div class="ends" style="font-size:1vw;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.60);margin-left: 310px;margin-top:20px">100</div>
		  <div class="ends" style="font-size:1vw;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.60);margin-left: 315px;margin-top:20px">80</div>
		  <div class="ends" style="font-size:1vw;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.60);margin-left: 315px;margin-top:20px">60</div>
		  <div class="ends" style="font-size:1vw;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.60);margin-left: 315px;margin-top:20px">40</div>
		  <div class="ends" style="font-size:1vw;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.60);margin-left: 315px;margin-top:20px">20</div>
		  <div class="ends" style="font-size:1vw;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.60);margin-left: 320px;margin-top:20px">0</div>
		  <div style="width: 800px;border: 1px solid #F5F5F5;margin-left: 335px;margin-top: -255px;"></div>
		  <div style="width: 800px;border: 1px solid #F5F5F5;margin-left: 335px;margin-top: 47px;"></div>
		  <div style="width: 800px;border: 1px solid #F5F5F5;margin-left: 335px;margin-top: 46px;"></div>
		  <div style="width: 800px;border: 1px solid #F5F5F5;margin-left: 335px;margin-top: 45px;"></div>
		  <div style="width: 800px;border: 1px solid #F5F5F5;margin-left: 335px;margin-top: 47px;"></div>
		  <div style="width: 800px;border: 1px solid #DDDEE0;margin-left: 335px;margin-top: 47px;"></div>
		  <div style="width: 45px;height: 195px;background-color: #64A7F0;margin-left: 380px;margin-top: -195px;"></div>
		  <div style="width: 45px;height: 243px;background-color: #64A7F0;margin-left: 505px;margin-top: -243px;"></div>
		  <div style="width: 45px;height: 218px;background-color: #64A7F0;margin-left: 635px;margin-top: -219px;"></div>
		  <div style="width: 45px;height: 218px;background-color: #64A7F0;margin-left: 765px;margin-top: -218px;"></div>
		  <div style="width: 45px;height: 230px;background-color: #64A7F0;margin-left: 900px;margin-top: -230px;"></div>
		  <div style="width: 2px;background-color: #C7C7CB;height: 5px;margin-left: 335px;margin-top: -1px;"></div>
		  <div style="width: 2px;background-color: #C7C7CB;height: 5px;margin-left: 462px;margin-top: -5px;"></div>
		  <div style="width: 2px;background-color: #C7C7CB;height: 5px;margin-left: 592px;margin-top: -5px;"></div>
		  <div style="width: 2px;background-color: #C7C7CB;height: 5px;margin-left: 722px;margin-top: -5px;"></div>
		  <div style="width: 2px;background-color: #C7C7CB;height: 5px;margin-left: 855px;margin-top: -5px;"></div>
		  <div style="width: 2px;background-color: #C7C7CB;height: 5px;margin-left: 992px;margin-top: -5px;"></div>
		  <div style="width: 2px;background-color: #C7C7CB;height: 5px;margin-left: 1133px;margin-top: -5px;"></div>
		  <div class="ends" style="font-size:1vw;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.60);margin-left: 379px;margin-top: 8px;">平时成绩</div>
	  	<div class="ends" style="font-size:1vw;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.60);margin-left: 504px;margin-top: -28px;">阶段成绩</div>
		  <div class="ends" style="font-size:1vw;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.60);margin-left: 635px;margin-top: -28px;">期中成绩</div>
		  <div class="ends" style="font-size:1vw;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.60);margin-left: 765px;margin-top: -28px;">期末成绩</div>
		  <div class="ends" style="font-size:1vw;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.60);margin-left: 905px;margin-top: -29px;">总成绩</div>
		  <div class="ends" style="font-size:1vw;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.60);margin-left: 1035px;margin-top: -29px;">补考成绩</div>
      <div style="width: 800px;border: 1px solid white;margin-left: 335px;margin-top: 55px;"></div>
    </div>
  </div>
  </Panel>
</template>

<script>
import echarts from 'echarts'
import iview from 'iview'
export default {
  data () {
    return {
      chartPie: null
    }
  },
  components: {
    iview
  },
  methods: {
    drawPieChart () {
      this.chartPie = echarts.init(document.getElementById('chartPie'))
      this.chartPie.setOption({
        series: [
          {
            name: '访问来源',
            type: 'pie',    // 设置图表类型为饼图
            radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            data: [          // 数据数组，name 为数据项名称，value 为数据项值
                      {value: 300, name: '已完成作业'},
                      {value: 300, name: '未提交作业'},
                      {value: 300, name: '已过期作业'}
            ],
            color: ['#00ffbf', '#00bfff', '#ff6666']
          }
        ]
      })
    },
    drawCharts () {
      this.drawPieChart()
    }
  },
  mounted: function () {
    this.drawCharts()
  }
}
</script>
<style>

</style>